<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <canvas id="cavsElem"></canvas>
    </div>
    <script>
        (function(){
            var canvas=document.getElementById("cavsElem");
            var ctx=canvas.getContext("2d");
            canvas.width=500;
            canvas.height=800;
            ctx.linewidth=1;
            canvas.style.border="1px solid blue";
            ctx.beginPath();
            ctx.fillStyle='#0bb0da';
            ctx.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.fillStyle='#fff';
            ctx.moveTo(110,110);
            ctx.quadraticCurveTo(-10,200,120,315);
            ctx.lineTo(280,315);
            ctx.quadraticCurveTo(410,210,290,110);
            ctx.lineTo(110,110);
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            ctx.fillStyle='#fff';
            ctx.moveTo(110,110);
            ctx.bezierCurveTo(110,25,200,25,200,100);
            ctx.bezierCurveTo(200,175,110,175,110,100);
            ctx.moveTo(200,100);
            ctx.bezierCurveTo(200,25,290,25,290,100);
            ctx.bezierCurveTo(290,175,200,175,200,100);
            ctx.fill();
            ctx.stroke();

            ctx.beginPath();
            ctx.fillStyle='#0bb0da';
            ctx.arc(200,500,100,0,2*Math.PI);
            ctx.fill();
            ctx.stroke();
        }());
    </script>
</body>
</html>